<style lang="scss">
  @import 'index';

</style>
<style type="text/css">
  .imgbox{width: 100%}
  .imgbox img{max-width: 100% !important;}
  .backfff{background: #fff !important;}
</style>
<template>

  <div class="ga-container">
    <!-- <div class="ga-index">
      <div class="ga-side-bar top" @click="returnTop"></div>
    </div> -->
    <div class="ga-product-detail">
      <!-- 顶部swiper -->
      <div>
        <swiper
          :indicator-dots="swiper.indicatorDots"
          :autoplay="swiper.autoplay"
          :interval="swiper.interval"
          :duration="swiper.duration"
          indicator-color="white"
          indicator-active-color="#ff3a35">
          <block v-for="(item,index) in data.atlas"  :key="index">
            <swiper-item>
              <image mode="aspectFit" :src="item" class="slide-image"/>
            </swiper-item>
          </block>
        </swiper>
      </div>

      <!--拼团 start-->
      <div class="ga-cell top-box">
        <div class="item">
          <div class="box">
            <span class="span1">商城价</span>
            <span class="span2">¥</span>
            <span class="span3">{{data.shop_price}}</span>
            <div>
              <p class="throughLine">¥{{data.market_price}}</p>
              <p>市场价</p>
            </div>
          </div>

          <div class="num">已售{{data.sale_num}}件</div>
        </div>
      </div>

      <div class="ga-cell type-box">
        <div class="item">
          <div>
            <p>
              <!-- <span class="btn primary"></span> -->
              <span class="title">{{data.goods_name}}</span>
            </p>
            <p class="gGray mt10"></p>
          </div>

          <div class="share-box">
            <button class="gaIcon share" open-type='share'></button>
            <p class="gGray">分享</p>
          </div>
        </div>
      </div>

      <!--第二件半价 start-->
      <div class="special-cell">
        <i class="gaIcon half"></i>
        <span class="span1">第二件半价</span>
        <span class="span2">准时抢好品 限量不等人</span>
      </div>
      <!--第二件半价 end-->



      <!--拼团推荐-->
      <h2 class="h2 mt10">猜你喜欢</h2>
      <ul class="ga-bargain-list">
        <li class="item" v-for="(item,index) in like" :key="index">
          <a :href="'../shopHalf/main?id='+item.seid">
            <div class="img-box">
              <img class="img" :src="item.icon" alt="">
            </div>
            <div class="con-box">
              <p class="p1">{{item.goods_name}}</p>
              <p class="p2">
                <span class="f30 gOrange">¥{{item.shop_price}}</span>
                <span>已售{{item.sale_num}}件</span>
              </p>
            </div>
          </a>
        </li>

      </ul>

      <!--详情内容-->
      <div class="pro-detail mt10">
         <div v-html="data.goods_desc" class="imgbox"></div>
      </div>

      <!--固定fixed底部-->
      <div class="ga-bottom-fixed">
        <div class="bottom">
          <!--tabs-->
          <ul class="tabs">
            <li class="item">
              <a @click="bindSwitchTab('../home/main')">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon1.png" alt="">
                <p>首页</p>
              </a>
            </li>
            <!-- <li class="item">
              <a @click="collect()">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/star.png" alt="">
                <p>收藏</p>
              </a>
            </li> -->
            <li class="item">
              <a @click="bindSwitchTab('../shopCart/main')">
                <img class="img" src="http://ga-1255639017.file.myqcloud.com/images/icon/tab_icon3.png" alt="">
                <p>购物车</p>
              </a>
            </li>
          </ul>

          <div class="btn-box">
            <!--(1)售罄-->
            <!--<a href="#" class="btn btn">
              <p>已售击</p>
              <p>去首页看看</p>
            </a>-->

            <!--(2)开团-->
            <a class="btn btn1 backfff">
              <!-- <p>加入购物车</p> -->
            </a>
            <!--说明：未开团
              禁止点击:disable
            -->
            <a class="btn btn2" @click="actionSheet=true">
              <p class="mt10">¥ {{data.shop_price}}</p>
              <p>立即购买</p>
            </a>
          </div>
        </div>
      </div>

      <!-- 选择属性弹层start-->
      <div>
        <div class="ga-mask" :class="{hide:!actionSheet}" @click="actionSheet=false"></div><!-- ga-mask-->

        <div class="ga-action-sheet" :class="{active:actionSheet}">

          <ul class="ga-media-list ga-detail-msg">
            <li class="item">
              <div class="item-media">
                <image class="img-box" mode="aspectFill" :src="data.icon"></image>
              </div>
              <div class="item-inner">
                <p>{{data.goods_name}}</p>
                <p class="p1">¥{{data.shop_price}}</p>
                <p class="p2">库存 <span>{{data.stock}}</span>件</p>
              </div>
            </li>
          </ul>

          <div class="num-box">
            <span class="pull-left">购买数量</span>
            <div class="pull-right">
              <gaNumber :val="number" :min="1" @on-change="numChange"></gaNumber>
            </div>
          </div>

          <div class="link-box mt20">
            <a class="link" @click="makeorder">确定</a>
          </div>

        </div>
      </div>
      <!-- 选择属性弹层end-->

    </div>
  </div>
</template>

<script>
import {isLogin,handleError,showToast} from '@/utils/handleLogin'
import gaNumber from '@/components/gaNumber'
export default {
  components: {
    gaNumber
  },
  data () {
    return {
      actionSheet:false,
      swiper: {
        imgUrls: [],
        indicatorDots: true,
        autoplay: true,
        interval: 5000,
        duration: 1000
      },
      data: [],
      like: [],

      number: 1,

    }
  },
  methods: {
    /** 接口数据 */
    async load () {
      /*商品信息*/
      this.$_util.ajax.get('https://guo-a.com/mapi/half/getdetail?id=' + this.$root.$mp.query.id).then((res)=>{
        console.log(res)
        if(res.code === 200){
          if (res.data.hasOwnProperty('goods_desc')) {
            res.data.goods_desc = this.formatImg(res.data.goods_desc)
          }
          this.data = res.data
        }
      })
      /*猜你喜欢*/
      this.$_util.ajax.post('https://guo-a.com/mapi/half/getlike',{id: this.$root.$mp.query.id}).then((res)=>{
        console.log(res)
        if(res.code === 200){
          this.like = res.data
        }
      })
    },
    async makeorder () {
      isLogin(() => {
        if(Number(this.data.stock)<this.number){
          showToast('库存不足')
          return false
        }
        this.bindNavigateTo('../confirmHalf/main?id='+this.$root.$mp.query.id + '&num=' + this.number)
      })
    },
    /**
     * 路由跳转
     */
    bindNavigateTo (url) {
        wx.navigateTo({
          url
        })
    },
    bindSwitchTab (url) {
        wx.switchTab({
          url
        })
    },
    formatImg (str) {
      if (!str) {
        return str
      }
      return str.replace(/<img/gi, '<img style="max-width:100%;height:auto" ')
    },
    /**
     * 数量
     * @param value : 数量数值
     */
    numChange (value){
      this.number = value
      console.log(this.number)
    },
    /*
    分享成功回调
     */
    async getticket () {
      this.$_util.ajax.post('https://guo-a.com/mapi/ticket/get_share_ticket?token=' + this.$store.state.Token).then((res) => {
        console.log('分享成功回调')
           if(res.code === 200 ){
              this.load()
           }
       })
    }
  },
  onShow () {
    /* url参数 */
    console.log(this.$root.$mp.query)
    this.actionSheet = false
    this.number = 1
    this.load()
  },

  created () {
  },
  mounted () {

  },
  /*小程序分享*/
  onShareAppMessage: function () {
    let that = this
    return {
      title: this.data.goods_name,
      desc:  '',
      path: '/pages/shopDetail/main?id=' + this.$root.$mp.query.id,
      success: function(res){
  　　　　　　// 转发成功之后的回调
　　　　　　if(res.errMsg == 'shareAppMessage:ok'){
              that.getticket()
　　　　　　}
　　　},
    }
  }
}
</script>
